<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<?php require_once('include/model/Event.php'); ?>
		<?php require_once('include/model/Member.php'); ?>
		<?php require_once('include/dao/MemberDAO.php'); ?>
		<?php require_once('include/model/Group.php'); ?>
		<?php require_once('include/model/PriceCategory.php'); ?>
		<?php require_once('include/dao/PriceCategoryDAO.php'); ?>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>De menapiërs inschrijvingsmodule</title>
		<!-- MISC METATAGS -->

		<link href="CSS/style.css" rel="stylesheet" type="text/css" />
		
		<!-- EVENTS -->		
		<?php 
			$main_event = Event::loadEvent(3);
			$sub_event = $main_event->getSubEvent();
			$sub_event_active = $main_event->hasSubEvent();
		?>
		
		<!-- SCRIPTS -->
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			var curr_obj = null;
		
			$(document).ready(function(){
				$('#inschr_fm').focus(function() {
					if($(this).val()=='familienaam'){ $(this).val('').css('color','black');  }
				}).focusout(function() {
					if($(this).val()==''){ $(this).val('familienaam').css('color','#bbbbbb');  }
				});
				
				$('#inschr_em').focus(function() {
					if($(this).val()=='email'){ $(this).val('').css('color','black');  }
				}).focusout(function() {
					if($(this).val()==''){ $(this).val('email').css('color','#bbbbbb');  }
				});
							
				$('.auto_item').css('display','none');	
					
				addParticipantMain();
				addParticipantSub();
				calculateTotalPrice();
				
				$('.auto_item').click(function() {
					var fn = $(this).find('.auto_fn').html();
					var vn = $(this).find('.auto_vn').html();
					$(curr_obj).find('.fn').val(fn);
					$(curr_obj).find('.vn').val(vn);
				});
			});
				
			function addParticipantMain(){
				$('#participants_main').append('<div class="participant">'+$('.participant_template_main').html()+'</div>');
				$('.participant').slideDown(400);
			}
			
			function addParticipantSub(){
				$('#participants_sub').append('<div class="participant">'+$('.participant_template_sub').html()+'</div>');
				$('.participant').slideDown(400);
			}
			
			function hideAutocomplete(){
				$('.autocomplete').slideUp(150, function() { $(this).css('display','none'); });
				calculateTotalPrice();	
			}
			
			function showAutocomplete(obj){
				curr_obj = obj;
				
				var y = ($(obj).offset().top)-10;
				$('.autocomplete').css('top',y+'px');
				$('.auto_item').css('display','none');
				setAutocomplete(obj);
			}	
					
			function setAutocomplete(obj){
				var fn = $(obj).find('.fn').val();
				$('.auto_item').css('display','none');
				$('.auto_fn').each(function(index){
					var v = $(this).html();
					v = v.toLowerCase();
					fn = fn.toLowerCase();
					if (v.substring(fn.length,0)== fn && fn.length>1){
						var v= $(obj).find('.vn').val();
						$(this).parents('.auto_item').css('display','block');
					}
				});
				$('.autocomplete').slideDown(300);
			}
			
			function calculatePrice(obj){
				var price = 0;
				var soort = parseFloat($(obj).find('.soorten').val());
								
				if ($(obj).find('.participant_table_main').length > 0){
					var soorten = new Array();
					<?php
						$pricecats_main = $main_event->getPriceCategories();
						foreach($pricecats_main as $pricecat){
							$price_id = $pricecat->getId();
							$price_group = $pricecat->getGroup()->getId();
							$price_name = $pricecat->getName();
							$price_cost = $pricecat->getCost();
							?>soorten['<?php echo $price_id;?>'] = <?php echo $price_cost;?>;<?php
						}
					?>					
					price = price+(soorten[''+soort]);
					<?php 
						$supplements_main = $main_event->getSupplements();
						foreach($supplements_main as $supp){
							$supp_id = $supp->getId();
							$supp_price = $supp->getPrice();
							echo "if($(obj).find('.chb_".$supp_id."').attr('checked')=='checked'){ price = price +".$supp_price.";}";
						}
					?>				
				}else{
					<?php if ($sub_event_active){ ?>
						var soorten = new Array();
						<?php
							$pricecats_sub = $sub_event->getPriceCategories();
							foreach($pricecats_sub as $pricecat){
								$price_id = $pricecat->getId();
								$price_group = $pricecat->getGroup()->getId();
								$price_name = $pricecat->getName();
								$price_cost = $pricecat->getCost();
								?>soorten['<?php echo $price_id;?>'] = <?php echo $price_cost;?>;<?php
							}
						?>	
						price = price+(soorten[''+soort]);							
						<?php
							$supplements_main = $sub_event->getSupplements();
							foreach($supplements_main as $supp){
								$supp_id = $supp->getId();
								$supp_price = $supp->getPrice();
								echo "if($(obj).find('.chb_".$supp_id."').attr('checked')=='checked'){ price = price +".$supp_price.";}";
							}
						?>	
					<?php } ?>
				}
				
					
				var fn = $(obj).find('.fn').val();
				var vn = $(obj).find('.vn').val();
				if (fn.length<=0 || vn.length<=0){
					price = 0;
				}	
				$(obj).find('.part_price').html(price);					
								
				calculateTotalPrice();	
			}
						
			function calculateTotalPrice(){
				var totalprice = 0;	
				$('.part_price').each(function(index) {
					if ($(this).parents('.participant_template_main').length > 0 || $(this).parents('.participant_template_sub').length > 0){
					}else{
						totalprice = totalprice+parseFloat($(this).html());
					}				
  				}); 
				$('.total_price').html(totalprice);
				$('#hidden_totalcost').val(totalprice);				
			}
			
			function submit_reservation_form(){
				var inputs = document.getElementById('module').getElementsByTagName('input');
				for(var i=0; i <inputs.length; i++){
					if (inputs[i].type == 'checkbox'){
						var isChecked = inputs[i].checked;
						changeInputType(inputs[i], 'hidden');
						if (!isChecked){
							inputs[i].value = "0";
						}
					}
				}
				document.frm_reservation.submit();
			}
			
			function changeInputType(oldObject, oType) {
				var newObject = document.createElement('input');
				newObject.type = oType;
				if(oldObject.size) newObject.size = oldObject.size;
				if(oldObject.value) newObject.value = oldObject.value;
				if(oldObject.name) newObject.name = oldObject.name;
				if(oldObject.id) newObject.id = oldObject.id;
				if(oldObject.className) newObject.className = oldObject.className;
				oldObject.parentNode.replaceChild(newObject,oldObject);
				return newObject;
			}
		</script>
	</head>
	<body>
		<div class="main">
			<div class="container">
				<div class="module" id="module">
				<form action="save2.php" method="post" name="frm_reservation">
					<input type="hidden" name="event_id" value="<?php echo $main_event->getId();?>" />
					<input type="hidden" name="totalcost" id="hidden_totalcost" value="0" />
					<?php
						if ($sub_event_active){
							?><input type="hidden" name="subevent_id" value="<?php echo $sub_event->getId();?>" /><?php
						}
					?>
					<div class="module_header">
						<p class="module_title"><?php echo $main_event->getName();?></p>
						<p class="module_content"><?php echo $main_event->getDescription();?></p>
					</div>
					<div class="event_header">
						<p class="event_title">inschrijven</p>
					</div>
					<div class="event_form">
						<div class="event_form_header">
							<table width="100%">
								<tr>
									<td width="25">&nbsp;</td>
									<td width="125">familienaam</td>
									<td width="125">voornaam</td>
									<td width="110">soort</td>
									<?php 
										$supplements_main = $main_event->getSupplements();
										foreach($supplements_main as $supp){
											$supp_name = $supp->getName();
											echo "<td>$supp_name</td>";
										}
									?>
									<td>&nbsp;</td>
								</tr>
							</table>
						</div>
						<div class="participants" id="participants_main">
						</div>
						<div class="participants_footer">
							<a href="javascript:addParticipantMain();" class="add_participant">nog iemand!<span>&nbsp;</span></a>
						</div>
					</div>
					<?php
						if ($sub_event_active){
					?>
						<div class="event_header subevent">
							<p class="event_title subevent">bezoekdag</p>
						</div>
						<div class="event_form event_footer">
							<div class="event_form_header">
								<table width="100%">
									<tr>
										<td width="25">&nbsp;</td>
										<td width="125">familienaam</td>
										<td width="125">voornaam</td>
										<td width="110">soort</td>
										<?php 
											$supplements_main = $sub_event->getSupplements();
											foreach($supplements_main as $supp){
												$supp_name = $supp->getName();
												echo "<td>$supp_name</td>";
											}
										?>
										<td>&nbsp;</td>
									</tr>
								</table>
							</div>
							<div class="participants" id="participants_sub">
							</div>
							<div class="participants_footer">
								<a href="javascript:addParticipantSub();" class="add_participant">nog iemand!<span>&nbsp;</span></a>
							</div>
						<?php
						}
						?>
					</div>
					<div class="event_submit">
						<div class="event_submit_form">
							<table>
								<tr>
									<td class="event_submit_input">
										<input type="text" id="inschr_fm" name="inschr_fm" style="color:#bbbbbb; width:150px;" value="familienaam" />
										<input type="text" id="inschr_em" name="inschr_em" style="color:#bbbbbb; width:150px;" value="email" />
									</td>
									<td class="event_submit_totalprice">
										<span class="total_price">0</span> €
									</td>
									<td class="event_submit_button">
										<a href="javascript:submit_reservation_form();">inschrijven</a>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="autocomplete">
						<ul>
							<?php
								$memberDAO = MemberDAO::getInstance();
								$members = $memberDAO->getAllMembers();
								foreach($members as $member){
									?><li class="auto_item"><b><span class="auto_fn"><?php echo strtolower($member->getLastname());?></span> <span class="auto_vn"><?php echo strtolower($member->getFirstname());?></span></b> (<?php echo strtolower($member->getGroup());?>)<span class="auto_tak_id">1</span></li><?php
								}								
							?>
						</ul>
					</div>
				</form>
				</div>				
			</div>
		</div>
	</body>		
</html>

<!-- TEMPLATES -->

<div class="participant_template_main">
	<script>		
		$('.participant_remove').click(function() {
			$(this).parents('.participant').slideUp(400, function() { $(this).remove(); calculateTotalPrice(); });
			calculateTotalPrice();	
		});
		
		$('.fn,.vn,.soorten,.chb_1').change(function() {
			calculatePrice($(this).parents('.participant'));
		});
		
		$('.fn').focus(function() {
			showAutocomplete($(this).parents('.participant'));
		});
		
		$('.fn').bind('keyup keypress change', function() {
			setAutocomplete($(this).parents('.participant'));
		});
		
		$('.fn').blur(function() {
			hideAutocomplete();
		});
	</script>
	<table width="100%" class="participant_table_main"><tr>
		<td width="25"><a href="#" class="participant_remove">&nbsp;</a></td>
		<td width="125"><input name="part_main_fn[]" class="fn" type="text" style="width:110px;" value="" /></td>
		<td width="125"><input name="part_main_vn[]" class="vn" type="text" style="width:110px;" value="" /></td>
		<td width="110">
			<select name="part_soort_main[]" class="soorten" style="width:100px;">
				<?php
					$pricecats_main = $main_event->getPriceCategories();
					foreach($pricecats_main as $pricecat){
						$price_id = $pricecat->getId();
						$price_group = $pricecat->getGroup()->getId();
						$price_name = $pricecat->getName();
						$price_cost = $pricecat->getCost();
						?><option value="<?php echo $price_id;?>"><?php echo $price_name;?></option><?php
					}
				?>
			</select>
		</td>		
		<?php 
			$supplements_main = $main_event->getSupplements();
			foreach($supplements_main as $supp){
				$supp_id = $supp->getId();
				$supp_price = $supp->getPrice();
				echo "<td align='center'><input class='chb_".$supp_id."' name='part_chb_".$supp_id."[]' type='checkbox' value='".$supp_id."' /></td>";
			}
		?>		
		<td align="right" class="participant_price"><span class="part_price">0</span> €</td>
	</tr></table>
</div>

<div class="participant_template_sub">
	<?php
		if ($sub_event_active){
	?>
		<script>		
			$('.participant_remove').click(function() {
				$(this).parents('.participant').slideUp(400, function() { $(this).remove(); calculateTotalPrice(); });
					
			});
			
			$('.fn,.vn,.soorten,.chb_2').change(function() {
				calculatePrice($(this).parents('.participant'));
			});
			
			$('.fn').focus(function() {
				showAutocomplete($(this).parents('.participant'));
			});
			
			$('.fn').bind('keyup keypress change', function() {
				setAutocomplete($(this).parents('.participant'));
			});
			
			$('.fn').blur(function() {
				hideAutocomplete();
			});
		</script>
		<table width="100%" class="participant_table_sub"><tr>
			<td width="25"><a href="#" class="participant_remove">&nbsp;</a></td>
			<td width="125"><input name="part_sub_fn[]" class="fn" type="text" style="width:110px;" value="" /></td>
			<td width="125"><input name="part_sub_vn[]" class="vn" type="text" style="width:110px;" value="" /></td>
			<td width="110">
				<select name="part_soort_sub[]" class="soorten" style="width:100px;">
					<?php
						$pricecats_sub = $sub_event->getPriceCategories();
						foreach($pricecats_sub as $pricecat){
							$price_id = $pricecat->getId();
							$price_group = $pricecat->getGroup()->getId();
							$price_name = $pricecat->getName();
							$price_cost = $pricecat->getCost();
							?><option value="<?php echo $price_id;?>"><?php echo $price_name;?></option><?php
						}
					?>
				</select>
			</td>
			<?php 
				$supplements_main = $sub_event->getSupplements();
				foreach($supplements_main as $supp){
					$supp_id = $supp->getId();
					$supp_price = $supp->getPrice();
					echo "<td align='center'><input class='chb_".$supp_id."' name='part_chb_".$supp_id."[]' type='checkbox' value='".$supp_id."' /></td>";
				}
			?>	
			<td align="right" class="participant_price"><span class="part_price">0</span> €</td>
		</tr></table>
	<?php } ?>
</div>